<template>
  <div>
    <h2>组合API-v-model</h2>
    <div>{{info}}</div>
    <div>{{msg}}</div>
    <hr>
    <!-- Vue2:.sync修饰的属性，必须通过 update:属性名 事件修改对应的值 -->
    <!-- this.$emit('update:msg', 'hi') -->
    <!-- Vue3中已经不再支持.sync修饰符 -->
    <TestCom v-model:modelValue='info' v-model:msg='msg' />
  </div>
</template>
<script>
import TestCom from './TestCom.vue'
import { ref } from 'vue'

export default {
  name: 'App',
  components: { TestCom },
  setup () {
    const info = ref('hello')
    const msg = ref('nihao')
    return { info, msg }
  }
}
</script>
